<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<body>
<div class="loading">
  <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
  <h1>大数据可视化系统数据分析通用模版</h1>
  <div class="time" id="showTime">2019/11/29 0:12:42</div>
		<script>
var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
		var t = null;
       document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+"";
        function Appendzero(obj){
			if(obj<10) return "0" +""+ obj;
			else return obj;
		 }
		t = setTimeout(time,1000); //设定定时器，循环运行
    }

</script>

</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
      <div class="boxall" style="height: calc(40% - .15rem)">
        <div class="alltitle">模块标题 </div>
        <div class="sycm">
          <ul class="clearfix">
            <li>
              <h2>1824</h2>
              <span>华东地区</span></li>
            <li>
              <h2>1920</h2>
              <span>华西地区</span></li>
            <li>
              <h2>19%</h2>
              <span>华南地区</span></li>

            <li>
              <h2>1824</h2>
              <span>华北地区</span></li>

          </ul>
        </div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: calc(60% - .15rem)">
        <div class="alltitle">模块标题</div>
   <div class="sycm sycm2">
          <ul class="clearfix">
            <li>
              <h2>1824</h2>
              <span>字段名称</span></li>
            <li>
              <h2>1920</h2>
              <span>字段名称</span></li>
            <li>
              <h2>19%</h2>
              <span>字段名称</span></li>

            <li>
              <h2>1824</h2>
              <span>字段名称</span></li>
           <li>
              <h2>19%</h2>
              <span>字段名称</span></li>

            <li>
              <h2>1824</h2>
              <span>字段名称</span></li>

          </ul>
        </div>
        <div class="boxfoot"></div>
      </div>

    </li>
    <li>
     <div style="position: relative">
		<div class="barnav">

			 <div class="bar">
        <div class="barbox">
          <ul class="clearfix">
            <li class="pulll_left counter">1942</li>
            <li class="pulll_left counter">98612</li>
            <li class="pulll_left counter">2091</li>
          </ul>
        </div>
        <div class="barbox2">
          <ul class="clearfix">
            <li class="pulll_left">字段名称</li>
            <li class="pulll_left">字段名称</li>
            <li class="pulll_left">字段名称</li>
          </ul>
        </div>

      </div>
		</div>
		 </div>
      <div class="mapbox">
		<div class="map">
        <div class="map1"><img src="images/lbx.png"></div>
        <div class="map2"><img src="images/jt.png"></div>
        <div class="map3"><img src="images/map.png"></div>
        <div class="map4" id="map_1"></div>
      </div>
		</div>
    </li>
    <li>

		<div class="boxall" style="height: calc(50% - .15rem)">
        <div class="alltitle">字段名称 <div class="pulll_right">
			<a href="#"><span></span>已维修</a>
			<a href="#"><span></span>未维修</a>
			</div></div>

        <div class="boxnav" id="echart3"></div>

        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: calc(50% - .15rem)">
        <div class="alltitle">字段名称</div>
        <div class="wrap boxnav">
          <ul>
            <li><p><span>深圳腾讯科技有限公司</span><span>门禁系统</span><span>在线</span></p></li>
            <li><p><span>网易科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
            <li><p><span>百度科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
            <li><p><span>汽车之家科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
            <li><p><span>小米科技有限公司</span><span>定位系统</span><span>在线</span></p></li>

          </ul>
        </div>
        <div class="boxfoot"></div>
      </div>
    </li>
  </ul>
  <div class="copyright">版权所有：深圳市深海时代网络科技有限公司 粤ICP备15031517号-4</div>
</div>

	<div class="mainbox2">
  <ul class="clearfix">
    <li>

		<div class="boxall" style="height: 100%">
        <div class="alltitle">模块标题
			<div class="pulll_right">
			<a href="#"><span></span>已检点</a>
			<a href="#"><span></span>未检点</a>
			</div>
			</div>
       <div class="boxnav">
		  <ul class="btbox">
		   <li id="bt01"></li>
		   <li id="bt02"></li>
		   <li id="bt03"></li>
		   <li id="bt04"></li>
		   </ul>
		  </div>
        <div class="boxfoot"></div>
      </div>

    </li>
	  <li>
		  <div class="boxall" style="height:100%">
        <div class="alltitle">模块标题
			  <div class="pulll_right sebtn" >
			<a href="#" class="active">近七天</a>
			<a href="#">近30天</a>
			<a href="#">12月</a>
			</div>
			  </div>
         <div class="boxnav" id="echart4"></div>


        <div class="boxfoot"></div>
      </div>
	  </li>

		</ul>
		</div>

<script language="JavaScript" src="js/js.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/area_echarts.js"></script>
<script src="js/jquery.liMarquee.js"></script>
<script>
$(function(){
	$('.wrap,.adduser').liMarquee({
		direction: 'up',//身上滚动
		runshort: false,//内容不足时不滚动
		scrollamount: 20//速度
	});
});

</script>


<script type="text/javascript">
		$('.counter').countUp();
  </script>
</body>
</html>
